///分公司分布图
<template>
    <div>
        分公司分布图
        <div ref="chinaMap" :style="widthAndHeightStyle">
        </div>
    </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import chinaJSON from '../../../../assets/json/china.json';
import { onMounted, ref } from 'vue'

let widthAndHeightStyle = ref('height: 700px;width: 100%;');
let chartHeight = ref(200); // 默认高度
let chartWidth = ref(200); // 默认宽度
let receivedProps = defineProps<{
    chartHeight: number;
    chartWidth: number;
}>();
if (receivedProps.chartHeight) {
    chartHeight.value = receivedProps.chartHeight;
}
if (receivedProps.chartWidth) {
    chartWidth.value = receivedProps.chartWidth;
}

widthAndHeightStyle.value = "height:" + (chartHeight.value - 40) + "px;width:" + (chartWidth.value - 40) + "px;";

const chinaMap = ref()
onMounted(() => {
    drawChina()
})
let regions = [
    {
        name: '北京市',
        itemStyle: {
            areaColor: '#ff0000',
            opacity: 1,
        },
    },
    {
        name: '陕西省',
        itemStyle: {
            areaColor: '#fe9b45',
            opacity: 1,
        },
    },
    {
        name: '上海市',
        itemStyle: {
            areaColor: '#ffc556',
            opacity: 1,
        },
    },
]
let scatter = [
    { name: '北京', value: [116.41995, 40.18994, 9] },
    { name: '西安', value: [108.953445, 34.288842, 9] },
    { name: '上海', value: [121.472644, 31.231706, 9] },
]
function drawChina() {
    var myChart = echarts.init(chinaMap.value)
    echarts.registerMap('china', chinaJSON as any) //注册可用的地图
    var option = {
        geo: {
            map: 'china',
            roam: true, //是否允许缩放，拖拽
            zoom: 1, //初始化大小
            //缩放大小限制
            scaleLimit: {
                min: 1.5, //最小
                max: 4, //最大
            },
            //设置中心点
            center: [105, 35],
            //省份地图添加背景
            regions: regions,
            itemStyle: {
                areaColor: '#66b3f9',
                color: 'red',
                borderColor: '#c1e1ff',
                borderWidth: 1,
            },
            //高亮状态
            emphasis: {
                itemStyle: {
                    areaColor: '#1af9e5',
                    color: '#fff',
                },
            },
        },
        //配置属性
        series: {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: scatter,
            showEffectOn: 'render',
            rippleEffect: {
                //涟漪特效相关配置
                brushType: 'stroke', //波纹的绘制方式，可选 'stroke' 和 'fill'
            },
            hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果
            label: {
                //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true,
                },
            },
            itemStyle: {
                //图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时
                normal: {
                    color: '#ffffff', //散点的颜色
                    shadowBlur: 1,
                    shadowColor: 2,
                    fontSize: '12px',
                },
            },
            zlevel: 1,
        },
    }
    myChart.setOption(option)
}
</script>